<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('漫画名称 列表')"/>
    <!--图片预览css-->
    <th:block th:include="include :: jasny-bootstrap-css" />
    <!--select 下拉框-->
    <th:block th:include="include :: select2-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>漫画名称：</label>
                            <input type="text" name="name"/>
                        </li>

                        <li>
                            <label>漫画国家：</label>
                            <select name="countriesId" class="form-control m-b">
                                <option value=" "></option>
                                <option th:each="dict : ${@dict.getType('guojia')}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictCode}"></option>
                            </select>
                        </li>

                        <li>
                            <label>漫画类型：</label>
                            <select name="typeId" class="form-control m-b">
                                <option value=" "></option>
                                <option th:each="dict : ${@dict.getType('manhua')}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictCode}"></option>
                            </select>
                        </li>

                        <li>
                            <label>作者名称：</label>
                            <select name="author" class="form-control m-b">
                                <option value=" "></option>
                                <option th:each="str : ${@MhCommon.getAuthor()}" th:text="${str}"
                                        th:value="${str}"></option>
                            </select>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="manhua:name:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.edit()"
               shiro:hasPermission="manhua:name:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="manhua:name:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="manhua:name:export">
                <i class="fa fa-download"></i> 导出
            </a>
            <a class="btn btn-success" onclick="paqu()">
                <i class="fa fa-plus"></i> 爬取
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>

<div class="modal inmodal" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated flipInY">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <small class="font-bold">更换封面
                </div>

                <div class="modal-body">
                        <div class="form-group" style="margin-left: 15%;">
                            <label class="font-noraml">添加封面</label>
                            <br/>
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
                                    <img id="img-tupian"  style="width: 100%;height: 100%;">
                                </div>
                                <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                    <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file" name="theCover" id="theCover"></span>
                                    <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal" id="button-huan">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="tupian(0,null)">更换</button>
                </div>
            </div>
        </div>
    </div>



<th:block th:include="include :: footer"/>
<!--图片预览css-->
<th:block th:include="include :: jasny-bootstrap-js" />
<!--select 下拉框-->
<th:block th:include="include :: select2-js"/>

<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('manhua:name:edit')}]];
    var removeFlag = [[${@permission.hasPermi('manhua:name:remove')}]];


    var prefix = ctx + "manhua/name";
    var prefix_chapter = ctx + "manhua/chapter";
    let prefix_climb = ctx + "manhua/climb";
    let prefix_comment = ctx + "manhua/comment";

    $(function () {

        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "漫画名称 ",
            columns: [{
                checkbox: false
            },
                {
                    field: 'name',
                    title: '漫画名称',
                    formatter: function (value, row, index) {
                        return $.table.tooltip(value,null,"open");
                    }
                },
                {
                    field: 'countriesName',
                    title: '漫画国家'
                },
                {
                    field: 'typeName',
                    title: '漫画类型'
                },

                /*{
                     field: 'typeId',
                     title: '漫画类型，存放的是字典数据表的id'
                 },*/
                {
                    field: 'theCover',
                    title: '封面地址',
                    formatter: function (value, row, index) {
                        return $.table.imageView($.haHa.decode(value));
                    }
                },

                {
                    field: 'newZhang',
                    title: '最新篇章',
                    formatter: function (value, row, index) {
                        return $.table.tooltip(value == '0'?'完结':value,null,"open");
                    }

                },
                {
                    field: 'author',
                    title: '漫画作者',
                    formatter: function (value, row, index) {
                        return $.table.tooltip(value,null,"open");
                    }
                },
                {
                    field: 'remark',
                    title: '介绍',
                    formatter: function (value, row, index) {
                        return $.table.tooltip(value,null,"open");//传值 长度不传添加所有字节
                    }
                },
                {
                    field: 'giveLike',
                    title: '点赞',
                    formatter: function (value, row, index) {
                        return $.common.reale({value: value, numder: 2});
                    }
                },
                {
                    field: 'collect',
                    title: '收藏',
                    formatter: function (value, row, index) {
                        return $.common.reale({value: value, numder: 3});
                    }
                },
                {
                    field: 'comment',
                    title: '评论',
                    formatter: function (value, row, index) {
                        return $.common.reale({value: value, numder: 1});
                    }
                },
                {
                    field: 'fond',
                    title: '喜欢数量',
                    formatter: function (value, row, index) {
                        return $.common.reale({value: value});
                    }
                },
                {
                    field: 'reading',
                    title: '阅读数量',
                    formatter: function (value, row, index) {
                        return $.common.reale({value: value, numder: 2});
                    }
                },
                {
                    field: 'delFlag',
                    title: '状态',
                    formatter: function (value, row, index) {
                        return value==0?$.common.reale({value:"启用", numder: 1}):$.common.reale({value:"停用", numder: 4})
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {

                        var actions = [];

                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="comment(\'' + row.id + '\')"><i></i>评论</a> ');
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="chapter(\'' + row.id + '\',\'' + row.name + '\')"><i></i>篇章</a> ');
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i></i>编辑</a> ');
                        actions.push('<button type="button" class="btn btn-primary btn-xs"  data-toggle="modal" data-target="#myModal2" onclick="tupian(\'' + row.id + '\',\'' + $.haHa.decode(row.theCover) + '\')"><i></i>换封面</button> ');
                       // actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                        row.delFlag == 0?actions.push('<a class="btn btn-warning btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="staus(\'' + row.id + '\',0)"><i></i>停用</a>')
                                        :actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="staus(\'' + row.id + '\',2)"><i></i>启用</a>');

                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);

    });

    let comment = (id) => {
        const url = prefix_comment+"/"+id;
        $.modal.openOptions({
            url:url,
            title:"评论",
            height:($(window).height()),
            width:($(window).width()-50),
            btn:false
        });
    }

    /*跳转篇章页面*/
    let chapter = (id,name)=>{
        const url = prefix_chapter+"/"+id;
        $.modal.openOptions({
            url:url,
            title:"章节",
            height:($(window).height()),
            width:($(window).width()-50),
            btn:false
        });
    }

    /*爬取*/
    let paqu =() => {
        const url = prefix_climb;
        $.modal.openOptions({
            url:url,
            title:"爬取",
            height:($(window).height()),
            width:($(window).width()-50),
            btn:false
        });

       // $.operate.submit(prefix+"/paqu", "post", "json");
    }

    let tupian_id = 0;
    /*修改状态*/
    let staus = (id, numder) => {
        if (numder == 0) {
            $.modal.confirm("确认要停用吗?", function () {
                $.operate.submit(prefix + "/edit", "post", "json", {id: id, delFlag: 2});
            });

        } else {
            $.modal.confirm("确认要启用吗?", function () {
                $.operate.submit(prefix + "/edit", "post", "json", {id: id, delFlag: 0});
            });

        }
    }
    /*更换封面*/
    let tupian = (id,theCover) => {
         if(id == 0 && theCover == null){
             var forData = new FormData();
             forData.append("theCovers",document.getElementById("theCover").files[0]);
             forData.append("id",tupian_id);

             var data = {
                 url:prefix + "/tupian",
                 type:"post",
                 data: forData,
                 dataType: "json",
                 contentType: false,
                 processData: false,
                 success: function(data) {
                     $.operate.ajaxSuccess(data);
                     $("#button-huan").click();
                 },
                 error:function(data) {
                     $.modal.alertError("上传失败");
                 }
             }
             $.ajax(data);

         }else {
             tupian_id = id;
             /*添加图片地址*/
             $("#img-tupian").attr("src",theCover);
         }
    }

</script>
</body>
</html>